<template>
  <a-upload-dragger name="file" :class="!$slots?'fileUploadDragger':'none-brag'" :multiple="multiple" :action="baseUrl + action" :headers="headers" :accept="accept" :data="fileData" @change="handleChange" :file-list="fileList">
    <slot></slot>
    <template v-if="!$slots">
      <p class="ant-upload-drag-icon">
        <a-icon type="cloud-upload" />
      </p>
      <p class="ant-upload-text">
        点击或将文件拖拽到这里上传
      </p>
      <p class="ant-upload-hint">
        支持扩展名：rar.zip.doc.docx.pdf.jpg…
      </p>
      <!-- </template> -->
    </template>
  </a-upload-dragger>
</template>

<script>
import storage from 'store'
import { UPLOAD_URL } from '@/const/const'
import { ACCESS_TOKEN } from '@/store/mutation-types'
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    action: {
      type: String,
      default: UPLOAD_URL
    },
    accept: {
      type: String,
      default: 'xls'
    },
    headers: {
      type: Object,
      default: () => {
        return { Authorization: storage.get(ACCESS_TOKEN) }
      }
    },
    multiple: {
      type: Boolean,
      default: false
    },
    fileData: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      loading: false,
      imageUrl: '',
      fileList: this.value ? [{
        uid: '-1',
        status: 'done',
        name: this.value,
        url: this.value
      }] : [],
      baseUrl: process.env.VUE_APP_API_BASE_URL
    }
  },
  watch: {
    value (newValue, oldValue) {
      console.log(newValue, oldValue, 'upload file')
      if (newValue != oldValue) {
        const fileArray = newValue ? [{
          uid: '-1',
          status: 'done',
          name: this.value,
          url: this.value
        }] : []
        setTimeout(() => {
          this.fileList = fileArray
        }, 200)
      }
      if (!newValue) {
        this.fileList = []
      }
    }
  },
  methods: {
    handleChange (info) {
      const { file, fileList } = info
      this.fileList = fileList
      if (file.status === 'done' && file.response && file.response.code === '000000') {
        this.$emit('input', file.response.data)
      } else if (file.status === 'removed') {
        this.$emit('input')
      } else if (file.response && file.response) {
        this.$notification.error({
          message: '错误提示',
          description: file.response && file.response.msg || '上传失败'
        })
      }
    }
  },
  components: {

  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-upload-list-item-name {
  width: 350px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
<style lang="less">
@import url("../../style/ant-design-variables.less");

.fileUploadDragger
  > .ant-upload.ant-upload-drag
  p.ant-upload-drag-icon
  .anticon {
  color: @primary-color;
}
.fileUploadDragger > .ant-upload.ant-upload-drag {
  width: 700px;
  height: 320px;
  background: #ffffff;
  border-radius: 16px;
  border: 2px solid #e8e8e8;
}
.fileUploadDragger {
  .ant-upload-text {
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    font-size: 18px;
  }
  .ant-upload-hint {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }
}
.none-brag {
  display: flex;
  flex-direction: column;
  width: fit-content;
}
.none-brag .ant-upload.ant-upload-drag {
  border: none;
  width: auto;
  height: auto;
  background-color: transparent;
  text-align: left;
  .ant-upload {
    padding: 0;
  }
}
</style>
